{extend name="common/base" /}
{block name="title"}{$info.title} - WampServer中文站{/block}
{block name="head"}
<meta name="description" content="">
<link rel="stylesheet" href="/public/static/css/github-markdown.css?v=202310081355">
<!-- <link rel="stylesheet" href="/public/static/highlight.js-11.7.0/styles/github.css"> -->
<link rel="stylesheet" href="/public/static/highlight.js-11.8.0/styles/dark.min.css">
<link rel="stylesheet" href="/public/static/viewerjs-1.11.1/viewer.min.css">
<style>
    .markdown-body {
        box-sizing: border-box;
    }
</style>
{/block}
{block name="body"}
<div class="container" style="margin-top: 65px;">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{:url('Index/index')}">首页</a></li>
            <li class="breadcrumb-item"><a href="{:url('Article/index')}">文章</a></li>
            <?php if (null !== $info->category) { ?>
                <li class="breadcrumb-item"><a href="{:url('Article/index', ['category_id' => $info->category_id])}"><?=$info->category->title?></a></li>
            <?php } ?>
            <li class="breadcrumb-item active" aria-current="page">详情</li>
        </ol>
    </nav>
    <h2>{$info.title}</h2>
    <div class="row row-cols-auto text-secondary">
        <div class="col"><i class="bi bi-clock"></i> {:substr($info.update_time, 0, 10)}</div>
        <div class="col"><i class="bi bi-eye"></i> <?=$info->view_count?></div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-lg-8">
            <article class="markdown-body border rounded p-3">
                {$info.content_html|raw}
            </article>
            <!-- <div class="mt-3 border rounded">
                <ins class="adsbygoogle"
                    style="display:block; text-align:center;"
                    data-ad-layout="in-article"
                    data-ad-format="fluid"
                    data-ad-client="ca-pub-8372518057241672"
                    data-ad-slot="1313079536"></ins>
            </div> -->
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-bookmark-plus"></i> 分类最新</div>
                <div class="list-group list-group-flush">
                    <?php foreach($new as $res) { ?>
                    <a class="list-group-item" href="<?=url('Article/info', ['id' => $res->id])?>"><?=$res->title?></a>
                    <?php } ?>
                </div>
            </div>
            <div class="mb-3 border rounded">
                <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8372518057241672" data-ad-slot="5617908519" data-ad-format="auto" data-full-width-responsive="true"></ins>
            </div>
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-fire"></i> 分类热门</div>
                <div class="list-group list-group-flush">
                    <?php foreach($hot as $res) { ?>
                    <a class="list-group-item" href="<?=url('Article/info', ['id' => $res->id])?>"><?=$res->title?></a>
                    <?php } ?>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/public/static/highlight.js-11.8.0/highlight.min.js"></script>
<script src="/public/static/viewerjs-1.11.1/viewer.min.js"></script>
<script>
$(document).ready(function () {
    // 高亮代码
    $('pre>code').each(function() {
        hljs.highlightElement(this);
    })

    // 初始化图片浏览器
    let viewer = new Viewer(document.getElementsByClassName('markdown-body')[0]);
    // 点击图片打开图片浏览器
    $('.markdown-body img').click(function () {
        viewer.show();
    });
});
</script>
{/block}